<template>
    <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>系统管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户信息</el-breadcrumb-item>
        </el-breadcrumb>
        <el-table
            :data="users"
            border
            style="width: 100%; margin-top: 15px;">
          <el-table-column
            prop="id"
            label="ID">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="gender"
            label="性别">
            <template slot-scope="scope">
                {{scope.row.gender == 'F' ? '女' : '男'}}
            </template>
          </el-table-column>
           <el-table-column
            prop="birthday"
            label="生日">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间">
          </el-table-column>
           <el-table-column
            prop="updateTime"
            label="更新时间">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: center;">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="goto"
          :total="total">
        </el-pagination>
      </div>
      
    </div>
</template>
<script>
import http from '@/core/httpRequest.js'
export default {
  data() {
    return {
      users: [],
      total: 0
    }
  },
  mounted() {
    this.goto(1)
  },
  methods: {
    goto(page) {
      http.get(`/user?page=${page}`).then(res => {
          this.users = res.data.data.users
          this.total = res.data.data.total
      })
    }
  }
}
</script>

<style>
</style>